<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>OSHINE</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style>
			img{
				vertical-align: bottom;
			}
			/* 通配符选择器 */
			*{
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.clearfix::before,.clearfix::after{
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
			.bd{
				border: 1px solid darkblue;
			}
			.w{
				width: 1280px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			/* ---------- 以下是header区 ---------- */
			header{
				height: 825px;
				background: #dfeef3 url(images/oshin-slide-1.jpg) no-repeat center 0;
				background-size: 1616px 825px;
				/* position: relative; */
				/* background-position: center; */
				/* max-width: 100%; #e7f2f4*/
			}
			/* .title{
				width: 100%;
				height: 100px;
				position: fixed;
				opacity: 0.8;
				z-index: 99;
				top: 0;
				left: 0;
				padding: 0;
				transition: all 300es ease-in-out;
			} */
			.logo{
				width: 118px;
				height: 50px;
				background: url(images/oshine-logo-black.png) no-repeat;
				margin: 25px 30px;
			}
			.classify{
				margin-bottom: 25px;
			}
			.classify ul{
				margin-top: 25px;
				/* margin-left: 20px; */
			}
			.classify ul li a{
				display: block;
				font-family: "Candara";
				font-weight: bold;
				/* letter-spacing: 1px; */
				text-transform: uppercase;
				line-height: 50px;
				margin-right: 42px;
				color: #000;
				transition: all 0.5s;
			}
			.classify ul li a:hover{
				color: #e0a240;
				transform: scale(1.2,1.2);
			}
			.search{
				/* margin-left: 33px; */
				margin-right: 12px;
			}
			.search li{}
			.search li a{
				display: block;
				padding: 15px 10px;
				margin: 25px 12px 0 0;
				color: #000000;
				transition: all 1s;
			}
			.search li a:hover{
				color: #e0a240;
				transform: rotate(360deg);
			}
			.search a i{}
			.animation{
				/* margin: 200px 435px 0 434px; */
				/* position: relative; */
				padding-top: 300px;
			}
			.an_t{
				/* margin: 300px 435px 0 472px; */
				font-family: "Candara";
				font-weight: bold;
				font-size: 27px;
				line-height: 80px;
				letter-spacing: 6px;
				text-align: center;
				/* position: absolute; */
				animation: an_t 1.5s;
			}
			@keyframes an_t{
				0%{
					transform: translate(-1000px,0);
				}
				100%{
					transform: translate(0,0);
				}
			}
			.an_c{
				/* margin: 35px 470px 40px 434px; */
				width: 350px;
				margin: 0 auto;
				/* position: absolute; 249px*/
				/* position: relative; */
				animation: an_c 1.5s;
				transition: all 0.5s;
			}
			@keyframes an_c{
				0%{
					transform: translate(0,-500px);
				}
				100%{
					transform: translate(0,0);
				}
			}
			.an_c:hover{
				width: 550px;
				background: rgba(0,0,0,0.2);
			}
			.an_c div{
				/* padding: 34px 55px ; */
				border: 8px solid #000;
				font-family: "Candara";
				font-weight: bold;
				font-size: 60px;
				line-height: 102px;
				letter-spacing: 5px;
				text-align: center;
				cursor: pointer;
			}
			.an_c div:hover{
				color: #e0a240;
			}
			.an_b{
				/* margin: 0 435px 0 475px; */
				font-family: "Times New Roman";
				font-style: italic;
				/* font-weight: bold;352px */
				font-size: 30px;
				line-height: 118px;
				text-align: center;
				letter-spacing: 2px;
				/* position: absolute; */
				animation: an_b 1.5s;
			}
			@keyframes an_b{
				0%{
					transform: translate(1000px,0);
				}
				100%{
					transform: translate(0,0);
				}
			}
		</style>
	</head>
	<body>
		<!-- 以下是header区 -->
		<header class="clearfix">
			<div class="title w">
				<div class="logo fl"></div>
				<div class="classify fl">
					<ul>
						<li class="fl"><a href="">Home</a></li>
						<li class="fl"><a href="">Pages</a></li>
						<li class="fl"><a href="">Portfolio</a></li>
						<li class="fl"><a href="">Single Portfolio</a></li>
						<li class="fl"><a href="">Headers</a></li>
						<li class="fl"><a href="">Journal</a></li>
						<li class="fl"><a href="">Shop</a></li>
						<li class="fl"><a href="">Shortcodes</a></li>
					</ul>
				</div>
				<div class="search fr">
					<li class="fl"><a href="" class="fa fa-search"></a></li>
					<li class="fl"><a href="" class="fa fa-bars"></a></li>
					<li class="fl"><a href="" class="fa fa-shopping-bag"></a></li>
				</div>
			</div>
			
			<div class="animation w ">
				<div class="an_t">MAKIAG THE WEB</div>
				<div class="an_c">
					<div>STYLISH</div>
				</div>
				<div class="an_b">The Bset or Nothing</div>
			</div>
		</header>
	</body>
</html>
